<template>
  <div class="company">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/company' }">公司列表</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row class="company-query" type="flex">
      <el-card class="box-card" shadow="always">
        <el-form class="form" :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item>
            <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-cascader
                placeholder="请选择公司城市"
                clearable
                :options="city"
                :show-all-levels="false"
                v-model="queryParams.country"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryParams.scale" clearable placeholder="请选择公司规模">
              <el-option v-for="item in scaleOptions" :key="item.value" :label="item.label"
                         :value="item.value" style="width: 220px"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-row type="flex" class="box-card-main" justify="space-around" v-show="firms.length !== 0">
      <el-skeleton :loading="loading" animated class="box-card-main">
        <template slot="template">
          <div class="box-card-main">
            <el-card class="box-card-main-children" v-for="o in 12" shadow="hover">
              <el-row class="info">
                <el-col>
                  <el-row type="flex">
                    <el-skeleton-item variant="text" style="width: 50px;height: 45px"/>
                    <el-col :span="20" class="firm-box-card-info-col">
                      <el-row>
                        <el-skeleton-item variant="text" style="width: 200px; height: 20px"/>
                      </el-row>
                      <el-row class="firm-box-card-info-col-row" type="flex" justify="left">
                        <el-skeleton-item variant="text" style="width: 50px;height: 20px"/>
                        <el-skeleton-item variant="text" style="width: 50px;height: 20px;margin-left: 10px"/>
                        <el-skeleton-item variant="text" style="width: 50px;height: 20px;margin-left: 10px"/>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="principal">
                <el-skeleton-item variant="text" style="width: 200px;height: 15px"/>
              </el-row>
            </el-card>
          </div>
        </template>
        <template>
          <el-card class="box-card-main-children" v-for="firm in firms" shadow="hover">
            <el-row class="info">
              <el-col>
                <el-row type="flex">
                  <el-avatar :src="server + firm.logo" fit="fill" shape="square" :size="45"></el-avatar>
                  <el-col :span="20" class="firm-box-card-info-col">
                    <el-row>
                      <router-link class="link" :to="{name: 'Details', query: {name: firm.company}}">{{ firm.company }}</router-link>
                    </el-row>
                    <el-row class="firm-box-card-info-col-row" type="flex" justify="left">
                      <el-tag size="mini" type="info">{{ firm.address }}</el-tag>
                      <el-tag size="mini" type="info" style="margin-left: 10px">{{ firm.scale }}</el-tag>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="principal">
                {{ firm.principal }}
                <el-divider direction="vertical"></el-divider>
                {{ firm.phone }}
            </el-row>
          </el-card>
        </template>
      </el-skeleton>
    </el-row>
    <el-row type="flex" justify="center" v-show="firms.length === 0" style="height: 450px">
      <el-empty description="暂无数据"></el-empty>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 10px" v-show="firms.length !== 0">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="firm_total"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Company",
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      scaleOptions: [
        { label: '1-10人', value: '1-10人' },
        { label: '10-100人', value: '10-100人' },
        { label: '100-200人', value: '100-200人' },
        { label: '200-500人', value: '200-500人' },
        { label: '500-1000人', value: '500-1000人' },
        { label: '1000-2000人', value: '1000-2000人' },
        { label: '2000-5000人', value: '2000-5000人' },
        { label: '5000-10000人', value: '5000-10000人' },
        { label: '10000人以上', value: '10000人以上' }
      ],
      queryParams: {
        companyName: '',
        scale: '',
        country: '',
        pageNum: 1,
        pageSize: 12,
        treeNode: {}
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      if (this.queryParams.country.length === 2) this.queryParams.country = this.queryParams.country[1]
      this.$store.dispatch('company/getCompanyInfoList', this.queryParams)
          .catch(error => {
            this.$message.error(error)
          })
          .finally(() => {
            setTimeout(() => {
              this.loading = false
            }, 1500)
          })
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
  },
  computed: {
    ...mapGetters(['city','firms','firm_total'])
  },
  watch: {
    'queryParams.country': {
      handler: function(val) {
        if (val.length === 0) this.queryParams.country = ''
        else this.queryParams.country = val
        this.getList()
      }
    },
    'queryParams.companyName': {
      handler: function(val) {
        this.queryParams.companyName = val
        this.getList()
      }
    },
    'queryParams.scale': {
      handler: function(val) {
        this.queryParams.scale = val
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="css">

.company {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.company-query {
  justify-content: center;
  margin: 20px;
}

.form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.box-card {
  border-radius: 20px;
}

.box-card-main {
  width: 1030px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: 450px;
}

.box-card-main-children {
  margin-bottom: 20px;
  width: 320px;
  border-radius: 20px;
  height: 102px;
  min-height: 102px;
  background: linear-gradient(#f4fafa 100%, #fdfdfd 0%) no-repeat 1px 75px;
}

.link {
  text-decoration: none;
  color: black;
}

.link:hover {
  color: #28b8b8;
}

.firm-box-card-info-col {
  position: relative;
  margin-left: 10px;
}

.firm-box-card-info-col-row {
  position: relative;
  margin-top: 4px;
}

.principal {
  position: relative;
  top: 15px;
  color: #707070;
  font-size: 13px;
}

.info {
  position: relative;
  bottom: 5px;
}
</style>
